<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班信息</title>
    <!-- 添加 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
            background-color: #f8f9fa; /* 浅灰色背景 */
            font-family: 'Arial', sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #ffffff; /* 白色卡片背景 */
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            padding: 20px;
        }
        h1 {
            color: #333333; /* 深灰色标题颜色 */
            text-align: center;
            margin-bottom: 20px;
        }
        .table-responsive {
            margin-top: 20px;
        }
        .table {
            margin-bottom: 20px;
        }
        .pagination-controls {
            margin-top: 20px;
        }
        .btn-primary, .btn-success, .btn-secondary {
            transition: all 0.3s ease;
        }
        .btn-primary:hover, .btn-success:hover, .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .loading-spinner {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* 侧边导航栏美化 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 250px;
            background-color: #ffffff;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            padding-top: 20px;
            z-index: 1000;
            transition: all 0.3s ease; /* 添加过渡效果 */
        }
        .sidebar a {
            display: block;
            padding: 12px 15px; /* 增加内边距 */
            text-decoration: none;
            color: #333;
            border-left: 3px solid transparent;
            font-size: 16px; /* 调整字体大小 */
            transition: all 0.3s ease;
        }
        .sidebar a:hover {
            background-color: #f8f9fa;
            border-left: 3px solid #007bff;
            transform: translateX(5px); /* 悬停时轻微移动 */
        }
        .sidebar a.active {
            background-color: #e9ecef;
            border-left: 3px solid #007bff;
            font-weight: bold; /* 选中状态加粗 */
        }
        .content-wrapper {
            margin-left: 270px;
            padding: 20px;
            transition: all 0.3s ease; /* 主内容区域平滑过渡 */
        }
    </style>

<body>
    <!-- 侧边导航栏 -->
    <div class="sidebar">
        <a href="/flights.html" class="active">首页</a> <!-- 默认选中首页 -->
        <a href="/add-airport.html">新增机场</a>
        <a href="/add-flight.html">新增航班</a>
    </div>

    <!-- 主内容区域 -->
    <div class="content-wrapper">
        <h1 class="mb-4">航班信息列表</h1>

        <!-- 搜索框 -->
        <div class="row mb-4">
            <div class="col-md-6 offset-md-3">
                <div class="input-group">
                    <input type="text" id="search-dep-airport" class="form-control" placeholder="请输入出发机场">
                    <span class="input-group-text">到</span>
                    <input type="text" id="search-arr-airport" class="form-control" placeholder="请输入到达机场">
                    <button class="btn btn-outline-primary" type="button" onclick="searchFlights()">搜索</button>
                </div>
            </div>
        </div>

        <!-- 加载动画 -->
        <div class="loading-spinner"></div>

        <!-- 航班表格 -->
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>航班号</th>
                        <th>航空公司</th>
                        <th>出发机场</th>
                        <th>到达机场</th>
                        <th>起飞日期</th>
                        <th>起飞时间</th>
                        <th>到达日期</th>
                        <th>到达时间</th>
                        <th>状态</th>
                        <th>基础票价</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="flight-table-body">
                    <!-- 数据将通过 JavaScript 动态插入 -->
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <div class="d-flex justify-content-center pagination-controls">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item" id="first-page">
                        <button class="page-link" onclick="goToFirstPage()">首页</button>
                    </li>
                    <li class="page-item" id="prev-page">
                        <button class="page-link" onclick="goToPreviousPage()">上一页</button>
                    </li>
                    <li class="page-item disabled" id="page-info">
                        <span class="page-link">当前第 1 页，共 1 页</span>
                    </li>
                    <li class="page-item" id="next-page">
                        <button class="page-link" onclick="goToNextPage()">下一页</button>
                    </li>
                    <li class="page-item" id="last-page">
                        <button class="page-link" onclick="goToLastPage()">尾页</button>
                    </li>
                </ul>
            </nav>
            
            <div class="ms-3">
                <input type="number" id="page-number" min="1" class="form-control d-inline-block w-auto" style="max-width: 80px;">
                <button class="btn btn-outline-primary ms-2" onclick="goToPage()">跳转</button>
            </div>
        </div>
    </div>

    <!-- 添加 jQuery 和 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 页面加载时默认显示所有航班
            fetchAllFlights();
        });

        let currentPage = 0;
        let totalPages = 0;

        function showLoadingSpinner(show) {
            $('.loading-spinner').toggle(show);
        }

        function fetchAllFlights(page = 0, size = 5) {
            showLoadingSpinner(true);
            $.ajax({
                url: `/api/flights?page=${page}&size=${size}`,
                method: 'GET',
                success: function(data) {
                    const tableBody = $('#flight-table-body');
                    tableBody.empty(); // 清空表格内容
                    
                    data.content.forEach(flight => {
                        const row = $('<tr>');
                        row.append(`
                            <td>${flight.id}</td>
                            <td>${flight.flightNo}</td>
                            <td>${flight.airline}</td>
                            <td>${flight.depAirport}</td>
                            <td>${flight.arrAirport}</td>
                            <td>${flight.depDate}</td>
                            <td>${flight.depTime}</td>
                            <td>${flight.arrDate}</td>
                            <td>${flight.arrTime}</td>
                            <td>${flight.status === 0 ? '正常' : '取消'}</td>
                            <td>${flight.basePrice}</td>
                            <td>
                                <button class="btn btn-sm btn-warning me-1" onclick="editFlight(${flight.id})">修改</button>
                                <button class="btn btn-sm btn-danger" onclick="deleteFlight(${flight.id})">删除</button>
                            </td>
                        `);
                        tableBody.append(row);
                    });

                    // 更新分页信息
                    currentPage = data.number;
                    totalPages = data.totalPages;
                    updatePaginationControls();
                },
                complete: function() {
                    showLoadingSpinner(false);
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching flights:', error);
                    alert('获取航班信息失败，请稍后重试');
                    showLoadingSpinner(false);
                }
            });
        }

        function updatePaginationControls() {
            $('#page-info span').text(`当前第 ${currentPage + 1} 页，共 ${totalPages} 页`);
            $('#first-page, #prev-page').toggleClass('disabled', currentPage === 0);
            $('#next-page, #last-page').toggleClass('disabled', currentPage === totalPages - 1);
        }

        function goToFirstPage() {
            if (currentPage !== 0) {
                fetchAllFlights(0);
            }
        }

        function goToPreviousPage() {
            if (currentPage > 0) {
                fetchAllFlights(currentPage - 1);
            }
        }

        function goToNextPage() {
            if (currentPage < totalPages - 1) {
                fetchAllFlights(currentPage + 1);
            }
        }

        function goToLastPage() {
            if (currentPage !== totalPages - 1) {
                fetchAllFlights(totalPages - 1);
            }
        }

        function goToPage() {
            const pageNumber = parseInt($('#page-number').val()) - 1;
            if (!isNaN(pageNumber) && pageNumber >= 0 && pageNumber < totalPages) {
                fetchAllFlights(pageNumber);
            } else {
                alert('请输入有效的页码');
            }
        }

        function searchFlights() {
            const depAirport = encodeURIComponent($('#search-dep-airport').val());
            const arrAirport = encodeURIComponent($('#search-arr-airport').val());
            
            $.ajax({
                url: `/api/flights/search?depAirport=${depAirport}&arrAirport=${arrAirport}`,
                method: 'GET',
                success: function(data) {
                    const tableBody = $('#flight-table-body');
                    tableBody.empty(); // 清空表格内容
                    
                    data.forEach(flight => {
                        const row = $('<tr>');
                        row.append(`
                            <td>${flight.id}</td>
                            <td>${flight.flightNo}</td>
                            <td>${flight.airline}</td>
                            <td>${flight.depAirport}</td>
                            <td>${flight.arrAirport}</td>
                            <td>${flight.depDate}</td>
                            <td>${flight.depTime}</td>
                            <td>${flight.arrDate}</td>
                            <td>${flight.arrTime}</td>
                            <td>${flight.status === 0 ? '正常' : '取消'}</td>
                            <td>${flight.basePrice}</td>
                            <td>
                                <button class="btn btn-sm btn-warning me-1" onclick="editFlight(${flight.id})">修改</button>
                                <button class="btn btn-sm btn-danger" onclick="deleteFlight(${flight.id})">删除</button>
                            </td>
                        `);
                        tableBody.append(row);
                    });
                    
                    // 更新分页信息
                    currentPage = 0;
                    totalPages = Math.ceil(data.length / 5);
                    updatePaginationControls();
                },
                error: function(xhr, status, error) {
                    console.error('Error searching flights:', error);
                    alert('搜索航班信息失败，请稍后重试');
                }
            });
        }

        function editFlight(id) {
            window.location.href = `/edit-flight.html?id=${id}`;
        }

        function deleteFlight(id) {
            if (confirm('确定要删除该航班吗？')) {
                $.ajax({
                    url: `/api/flights/${id}`,
                    method: 'DELETE',
                    success: function() {
                        alert('删除成功');
                        fetchAllFlights(currentPage);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error deleting flight:', error);
                        alert('删除失败，请稍后重试');
                    }
                });
            }
        }
    </script>
</body>
</html>